<template>
    <Dialog class="phone-dialog" :openVis="visible" width="60%" :title="dialogTitle" @close="closeDialog" :maskClosable="false">
        <template #container>
            <div v-if="useForm" class="form-container">
                <Form :model="formRecord" :label-width="100" v-bind="formItemLayout">
                    <a-form-item label="性别">
                        <a-select v-model:value="formRecord.sex" placeholder="请选择" :options="sexTypeList"></a-select>
                    </a-form-item>
                </Form>
            </div>
            <BasicTable
                ref="registerTable"
                class="table-container"
                :class="[themeType]"
                :key="visible"
                :columns="columns"
                :api="getPhoneList"
                :apiParams="formState"
            ></BasicTable>
        </template>
    </Dialog>
</template>
<script setup lang="ts">
    import { computed, ref, watch } from 'vue';
    import Dialog from '/@/components/dialog/Dialog.vue';
    import { useDialog } from '/@/views/components/dialogHooks.ts';
    import BasicTable from '/@/components/secondaryScreen/secondMap/components/basicTable/BasicTable.vue';
    import { Form } from 'ant-design-vue';
    import { SexType, sexTypeList } from '/@/utils/settings.ts';
    import { getPhoneList } from '/@/views/centralScreen/centralScreen.api.ts';
    import { useTheme } from '/@/hooks/theme/useTheme.ts';
    import { useUserStore } from '/@/store/modules/user.ts';

    const props = defineProps({
        record: Object,
        title: String,
        useForm: Boolean,
        labelCol: Object,
        wrapperCol: Object,
        setting: Object,
        phoneType: String,
    });
    const { themeType } = useTheme();
    const formItemLayout = {
        labelCol: {
            style: { width: '100px' },
            ...props.labelCol,
        },
        wrapperCol: {
            span: 6,
            ...props.wrapperCol,
        },
    };

    const columns = [
        {
            title: '姓名',
            dataIndex: 'realName',
            key: 'realName',
        },
        {
            title: '单位',
            dataIndex: 'departName',
            key: 'departName',
            ellipsis: true,
        },
        {
            title: '部门',
            dataIndex: 'orgName',
            key: 'orgName',
            ellipsis: true,
        },
        {
            title: '性别',
            dataIndex: 'sex_dictText',
            key: 'sex_dictText',
            width: 80,
        },
        {
            title: '时间',
            dataIndex: 'time',
            key: 'time',
        },
        {
            title: '电话',
            dataIndex: 'phone',
            key: 'phone',
        },
    ];
    const formRecord = ref({
        sex: SexType.all,
    });
    const userStore = useUserStore();
    const formState = computed(() => ({
        ...formRecord.value,
        dataType: props.setting.dataType,
        phoneType: props.phoneType,
        showType: '0',
        centerId: userStore.getCenterInfo?.id,
    }));
    const dialogTitle = ref();
    const { visible, closeDialog, openDialog } = useDialog({ title: dialogTitle.value });
    const registerTable = ref();
    watch(props, () => {
        registerTable.value?.getRecords();
        dialogTitle.value = props.title;
    });
    defineExpose({
        openDialog,
    });
</script>
<style scoped lang="less">
    .phone-dialog {
        overflow: auto;
    }

    .form-container {
        margin: 10px 0;

        :deep(.ant-form-item-label > label) {
            color: var(--formLabel);
        }
    }

    .table-container {
        margin: 0 10px;
    }
</style>
